<template>
  <div class="container">
<!--    <div class="nav">-->
<!--      <el-menu-->
<!--          :default-active="activeIndex"-->
<!--          class="el-menu-demo"-->
<!--          mode="horizontal"-->
<!--          :ellipsis="false"-->
<!--          @select="handleSelect"-->
<!--          :router="true"-->
<!--          background-color="#409EFF"-->
<!--          text-color="#fff"-->
<!--          active-text-color="#fff"-->
<!--      >-->
<!--        <el-menu-item index="/">-->
<!--          <img-->
<!--              style="width: 100px"-->
<!--              src="https://www.xaut.edu.cn/image/logo.png"-->
<!--              alt="Element logo"-->
<!--          />-->
<!--        </el-menu-item>-->
<!--        <div class="flex-grow"/>-->
<!--        <el-menu-item index="/index">首页</el-menu-item>-->
<!--        <el-menu-item index="/judge" v-if="authority=='评委'"> 评委</el-menu-item>-->
<!--        <el-menu-item index="/manage" v-if="authority=='管理员'"> 管理</el-menu-item>-->
<!--        <el-menu-item index="/my"> 我的</el-menu-item>-->
<!--        <div style="display: flex;align-items: center;margin: 10px ">-->
<!--          <el-button type="success" :icon="Position" circle @click="layout"/>-->
<!--        </div>-->
<!--      </el-menu>-->
<!--    </div>-->
    <div class="body">
      <router-view></router-view>
    </div>
    <div class="btm">
      <Nav :item="item" :width="width"/>
    </div>
   <footer>
    Copyright © 西安理工大学
</footer>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import Nav from '@/components/nav'
import {useRouter} from "vue-router";

const item = ref([
  {
    name: "首页",
    left: 0, path: "/"
  },
  {
    name: "动态",
    left: 25, path: "/"
  },
      {
    name: "队伍",
    left: 50, path: "/"
  },
      {
    name: "我的",
    left: 75, path: "/"
  },

])
const width = ref(100 / 8)
const router = useRouter()
const authority = window.localStorage.getItem("authority")
const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}
// onMounted(() => {
//   if (authority == '评委') {
//     item.value = [
//       {
//         name: "首页",
//         left: 0, path: "/index"
//       },
//
//       {
//         name: "评委",
//         left: 33, path: "/judge"
//       },
//       {
//         name: "我的",
//         left: 66, path: "/my"
//       }
//     ]
//     width.value = 100 / 6
//   }
//   if (authority == '管理员') {
//     item.value = [
//       {
//         name: "首页",
//         left: 0, path: "/index"
//       },
//
//       {
//         name: "管理",
//         left: 33, path: "/manage"
//       },
//       {
//         name: "我的",
//         left: 66, path: "/my"
//       }
//     ]
//     width.value = 100 / 6
//
//   }
//
// })
const layout = () => {
  window.localStorage.clear()
  router.push('/login')
}
</script>

<style scoped lang="less">
.flex-grow {
  flex-grow: 1;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  overflow: hidden;

  .body {
    width: 100%;
    background-color: #f3f5f7;

    router-view {
      width: 100%;
      height: 100%;
    }
  }
}

footer {
  bottom: 0;
  height: 15%;
  color: #C0C4CC;
  font-size: 14px;
  padding: 10px;
  margin: 10px auto;
}

@media screen and(min-width: 480px) {
  .btm {
    display: none;
  }

  .body {
    flex: 1;
    overflow: hidden;
    height: 100vh;

  }
}

@media screen and (max-width: 480px) {
  footer, .nav {
    display: none;
  }

  .body {
    overflow-y: scroll;
  }

  .btm {
    width: 100vw;
    position: absolute;
    bottom: 0;
    flex:1;
  }

  .body {
    height: 90vh !important;
    padding-bottom: 20px;
  }

}
</style>